<template>
	<view class="register">
		<g-navbar title="注册"></g-navbar>
		<view class="register-title">
			注册小律优创
		</view>
		<view class="register-form">
			<uni-forms class="form-main" :modelValue="formData" :rules="rules" ref="registerForm">
				<uni-forms-item class="form-item" label="手机号" name="phone">
					<g-input type="phone" v-model="formData.phone" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="验证码" name="code">
					<g-input type="code" ref="codeInput" @clickvcode="clickvcode" v-model="formData.code"
						:disabled="!isVcodeDisable" id="register" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="密码" name="password">
					<g-input type="password" v-model="formData.password" />
				</uni-forms-item>
				<uni-forms-item class="form-item confirm_password" label="确认密码" name="confirm_password">
					<g-input type="password" v-model="formData.confirm_password" />
				</uni-forms-item>
				<!-- 				<uni-forms-item class="form-item" label="结算卡号" name="bank_no">
					<g-input type="other" :maxLength="20" input_type="number" placeholder="请输入结算卡号"
						v-model="formData.bank_no" />
				</uni-forms-item> -->
				<!-- 		<uni-forms-item class="form-item parent_phone" label="推荐人" name="parent_phone" v-if="version==VERSION_TYPE.EXP_VERSION">
					<g-input type="other" input_type="number" placeholder="请输入推荐人手机号" v-model="formData.parent_phone" />
				</uni-forms-item> -->
				<uni-forms-item class="form-item" label="邀请码" name="share_code">
					<g-input type="other" input_type="text" placeholder="请输入邀请码" v-model="formData.share_code"
						:ref="inputRef" />
				</uni-forms-item>
			</uni-forms>
		</view>

		<view class="register-btn-wrapper">
			<g-button btn_text="注册" :width="686" :height="104" :fontSize="32" @click="register" />
			<view class="jump-login-btn" @click="jumpLogin">有账号登录</view>
		</view>

		<g-service-terms ref="service" style="position: relative;margin-top: 100rpx;" />

	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		reactive,
		computed,
		Ref,
		onMounted,
		nextTick
	} from 'vue';
	import {
		onReady, onLoad
	} from '@dcloudio/uni-app';
	import {
		useUserData
	} from '@/hooks/useUserData';
	import REST_URL from '@/http/http.restUrl';
	import {
		useToken
	} from '@/hooks/useToken';
	import { useStore } from 'vuex';
	import global from '@/global';
	import type { IRegisterForm } from './types';
	import { VERSION_TYPE } from '@/enum/version';

	const store = useStore();

	//表单元素
	const registerForm : Ref<any> = ref(null);
	//服务条款元素
	const service : Ref<IServiceComp> = ref({} as IServiceComp);

	const codeInput : Ref<any> = ref(null);

	const formData : IRegisterForm = reactive({
		phone: '',
		password: '',
		confirm_password: '',
		code: '',
		// bank_no: '',
		share_code: '',
		// parent_phone: '',
		page_from: store.state.version,
	})

	// const inputRef = (el) => {
	// 	if (el) {
	// 		el.update();
	// 	}

	// }

	onLoad((e) => {
		if (e.share_code) {
			formData.share_code = e.share_code;
			console.log(formData.share_code)
		}
	})

	const rules = {
		phone: {
			rules: [{
				required: true,
				errorMessage: '请输入手机号码',
			},
			{
				minLength: 11,
				errorMessage: '请输入11位手机号码'
			},
			]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码'
			},
			{
				minLength: 6,
				errorMessage: '密码需要至少6位字符'
			}
			]
		},
		confirm_password: {
			rules: [{
				required: true,
				errorMessage: '请输入确认密码'
			},
			{
				validateFunction: (rule, value, data, callback) => {
					if (data.password !== value) {
						callback('确认密码与密码不一致')
					}
					return true
				}
			}
			]
		},
		code: {
			rules: [{
				required: true,
				errorMessage: '请输入验证码'
			},
			{
				minLength: 6,
				errorMessage: '请输入6位验证码'
			}
			]
		},
		// bank_no: {
		// 	rules: [{
		// 		required: true,
		// 		errorMessage: '请输入结算卡号'
		// 	},]
		// },
		share_code: {
			rules: [{
				required: true,
				errorMessage: '请输入邀请码'
			},]
		},
		parent_phone: {
			rules: [{
				required: store.state.version == VERSION_TYPE.EXP_VERSION,
				errorMessage: '请输入推荐人手机号'
			},]
		}
	}


	onReady(() => {
		registerForm.value.setRules(rules);
	})

	const isVcodeDisable = computed(() => {
		return formData.phone && formData.phone.length == 11;
	})

	const register = () => {
		if (!service.value.isAgreeServicTerms) {
			uni.prompt.$showToast('请同意服务条款');
			return
		}
		registerForm.value.validate().then(async (form : IRegisterForm) => {
			console.log('表单验证成功：', form);
			const {
				setTokenSync,
				getTokenSync
			} = useToken();
			const {
				setUserLocalLabel,
				getUserInfo
			} = useUserData();
			//注册
			const result = await uni.http.POST(REST_URL.register, formData);
			console.log('result======>', result.data);
			//存储token
			setTokenSync(result.data.access_token);
			console.log('token===========>', getTokenSync())
			//获取用户信息
			const userInfo = await getUserInfo(result.data.customer_id);
			console.log('userInfo============>', userInfo)
			//设置用户本地标签
			setUserLocalLabel(result.data.customer_id);
			//存储用户信息
			uni.store.local('userInfo', userInfo);
			//设置登录状态
			uni.loginManger.$resolve();

			// global.authorization('/pages/follow_check/followCheck');


			uni.router.route({
				url: '/pages/follow/follow',
				success: () => {
					uni.prompt.$showToast('注册成功')
				}
			})

		}).catch((form : loginFormData) => {
			console.log('表单验证失败：', form);
		})
	}
	const clickvcode = async () : Promise<void> => {
		await uni.http.POST(REST_URL.sendCode, {
			phone: formData.phone
		})
		codeInput.value.changeStatus();
		uni.prompt.$showToast('已发送验证码');
	}

	const jumpLogin = () : void => {
		uni.navigateTo({
			url: '/pages_login/login_entry/loginEntry'
		})
	}
</script>

<style scoped lang="scss">
	@import "./register.scss";
</style>